<template>
  <div class="shop-container">
    <h2>基本信息</h2>
    <div class="shop-part2">
      <div class="shop-part2-box">
        <p>店铺名称：</p>
        <Input v-model="shopName" placeholder="请输入店铺名称" style="witdh: 300px">
          <Icon @click="saveShopName" custom="iconfont icon-Save" slot="suffix" />
        </Input>
        <p>称号：</p>
        <Tag color="warning">{{craftsman.rank}}</Tag>
      </div>

      <div class="shop-part2-box">
        <p>认证时间：{{craftsman.check_time}}</p>
        <p>所属交流圈：{{craftsman.zone.title}}</p>
      </div>

      <p>
        账号状态：
        <span
          :style="craftsman.status==0?'color: #2ecc71':'color: #e74c3c'"
        >{{this.craftsman.status==0?'正常':'封禁中'}}</span>
      </p>
    </div>
    <Divider />
    <h2>封面图上传</h2>
    <div class="shop-part1">
      <div class="shop-part1-left">
        <p>
          图片将展示在您的个人主页，优美的图片有助于人气提升哦~
          <br />格式jpg、png，文件大小&le;5MB,建议尺寸&ge;1332*749
        </p>
        <Upload
          :action="'/api/user/' + this.uid + '/cover'"
          :format="['jpg', 'png','jpeg']"
          :on-success="onSuccess"
          :max-size="5120"
          :on-progress="onProgress"
          :show-upload-list="false"
        >
          <Button :loading="loading" size="large" type="primary" icon="ios-cloud-upload-outline">
            <span v-if="!loading">上传图片</span>
            <span v-else>上传中...</span>
          </Button>
        </Upload>
      </div>
      <div class="shop-part1-right">
        <p>效果预览：</p>
        <Card>
          <div>
            <img :src="this.craftsman.image_src ? this.craftsman.image_src : defaultImg" />
          </div>
        </Card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "shop",
  props: {
    uid: String
  },
  data() {
    return {
      user: Object,
      craftsman: {zone: ''},
      defaultImg: require("@/assets/img/login-bg2.png"),
      shopName: "",
      originShopName: String,
      loading: false
    };
  },
  created() {
    this.$Spin.show();
    this.axios
      .get(`/api/user/${this.uid}`)
      .then(res => {
        this.user = res.data;
        this.axios
          .get(`/api/craftsman/${this.user.craftsman_id}`)
          .then(res2 => {
            this.craftsman = res2.data;
            this.shopName = this.craftsman.shop_name;
            this.originShopName = this.craftsman.shop_name;
            this.$Spin.hide();
          })
          .catch(error => console.log("error :", error));
      })
      .catch(error => console.log("error :", error));
  },
  methods: {
    saveShopName() {
      if (this.originShopName == this.shopName)
        return this.$Message.error("您未作出任何修改");
      this.axios
        .post(`/api/craftsman/${this.craftsman.id}`, {
          shopName: this.shopName
        })
        .then(res => this.$Message.success("保存成功！"))
        .catch(error => this.$Message.error("保存失败！请检查网络连接"));
    },
    onSuccess(response, file) {
      this.craftsman.image_src = response.data;
      this.loading = false;
      this.$Message.success("修改封面图成功");
    },
    onProgress() {
      this.loading = true;
    }
  }
};
</script>

<style>
</style>